<template>
  <div class="flex">
    <left2></left2>
    <div style="width: calc(100vw - 200px); padding: 30px; position: relative; height: 100vh; ">
      <div style="position: absolute; right: 20px; top: 20px; z-index: 9999;">
        <el-upload ref="upload" :action="url" :on-success="handleAvatarSuccess" :show-file-list="false" accept=".cms,.bms,.tms">
          <el-button type="danger" >导入文件</el-button>
        </el-upload>
      </div>
      <div class="flex" style="width: 100%; overflow: hidden;">
        <div style="width: 250px;">
          <div style="background: #fefefe; padding: 20px; border-radius: 5px; ">
            <div style="margin-bottom: 20px;">请选择文件：</div>
            <div style="max-height: 400px; overflow: auto;">
              <div v-for="item in list" :key="item.id" style="margin-bottom: 10px;"><el-radio v-model="wenjian_id" :label="item.fileId" @change="gettongdao()">{{item.fileName}}</el-radio></div>
            </div>
          </div>
          <div style="background: #fefefe; padding: 20px; border-radius: 5px; ">
            <div style="margin-bottom: 20px;">请选择通道：</div>
            <div style=" max-height: 300px; overflow: auto;">
              <div v-for="item in list2" :key="item"><el-radio v-model="tongdao_id" :label="item" @change="chushihuaechars()">{{item}}通道</el-radio></div>
            </div>
          </div>
        </div>
        <div style="flex-grow: 1;">
          <high-chart :options="chartOptions" ref="chart" style=" margin: 0 auto;width: 98%; height: 720px;"></high-chart>
          <el-table
            :data="tableData"
            border
            style="width: 1300px;margin: auto;">
            <el-table-column prop="rmsvalue" label="通道有效值"></el-table-column>
            <el-table-column prop="isoa_21_0_10" label="加速度0.1-10Hz有效值"></el-table-column>
            <el-table-column prop="isoa_21_0_200" label="加速度0.1-200Hz有效值"></el-table-column>
            <el-table-column prop="isoa_21_200_300" label="加速度200-300Hz有效值"></el-table-column>
            <el-table-column prop="isoa_21_200_500" label="加速度200-500Hz有效值"></el-table-column>
            <el-table-column prop="indexkur" label="峭度值标"></el-table-column>
            <el-table-column prop="indexi" label="脉冲指标"></el-table-column>
            <el-table-column prop="indexk" label="波形指标"></el-table-column>
            <el-table-column prop="indexl" label="裕度指标"></el-table-column>
            <el-table-column prop="indexsk" label="歪度指标"></el-table-column>
            <el-table-column prop="indexc" label="峰值指标"></el-table-column>
            <el-table-column prop="indexxr" label="方根幅值"></el-table-column>
            <el-table-column prop="indexmax" label="最大值"></el-table-column>
            <el-table-column prop="indexmin" label="最小值"></el-table-column>
            <el-table-column prop="indexmean" label="均值"></el-table-column>
            <el-table-column prop="indexeven" label="平均幅值"></el-table-column>
            <el-table-column prop="indexp" label="峰值"></el-table-column>
            <el-table-column prop="indexpp" label="峰峰值"></el-table-column>
          </el-table>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { huoqutongdao, huoqushuju, huoqushiboqiwenjian } from '@/api/shiboqi'
import left2 from '@/view/left2.vue'
import { Chart } from 'highcharts-vue'
import Highcharts from 'highcharts'
import HighchartsBoost from 'highcharts/modules/boost'
import exporting from 'highcharts/modules/exporting'
Highcharts.setOptions({
  lang: {
    resetZoom: '恢复视图'
  }
})
HighchartsBoost(Highcharts)
exporting(Highcharts)
export default {
  name: 'shiboqi',
  components: {
    left2,
    highChart: Chart
  },
  data () {
    return {
      url: process.env.IP_URL + '/api/file/saveSqlFile',
      chartOptions: {
        credits: {
          enabled: false // 禁用版权信息
        },
        chart: {
          animation: false,
          type: 'line', // 假设你想绘制折线图
          zooming: {
            type: 'x'
          },
          panning: true,
          panKey: 'shift'
        },
        boost: {
          pixelRatio: 0,
          useGPUTranslations: true,
          seriesThreshold: 1
        },
        title: {
          text: '传感器',
          align: 'left'
        },
        yAxis: {
          title: {
            text: null
          }
        },
        accessibility: {
          screenReaderSection: {
            beforeChartFormat:
              '<div>{xAxisDescription}</div><div>' +
              '{yAxisDescription}</div>'
          }
        },
        tooltip: {
          valueDecimals: 4
        },
        xAxis: {
          categories: []
        },
        // 去除显示的series
        legend: {
          enabled: false
        },
        plotOptions: {
          series: {
            animation: false
          }
        },
        series: [{
          data: [],
          animation: false,
          lineWidth: 0.5,
          name: '传感器'
        }]
      },
      list: [],
      list2: [],
      wenjian_id: '',
      tongdao_id: '',
      shuju: [],
      tableData: []
    }
  },
  created () {

  },
  mounted () {
    this.getlist()
  },
  beforeDestroy () {

  },
  methods: {
    chushihuaechars: function () {
      huoqushuju(this.wenjian_id, this.tongdao_id).then((res) => {
        this.shuju = res.data.wave
        this.tableData = res.data.valueDtoList
        this.appendData()
      }).catch(error => {
        this.shuju = []
        this.appendData()
      })
    },
    appendData () {
      let x = []
      this.shuju.forEach((item, index) => {
        x.push(index)
      })
      this.$refs.chart.chart.xAxis[0].update({ categories: x }, false)
      this.$refs.chart.chart.series[0]
        .update({ data: this.shuju }, false)
      this.$refs.chart.chart.redraw()
    },
    gettongdao: function () {
      huoqutongdao(this.wenjian_id).then((res) => {
        this.list2 = res.data
        this.shuju = []
        this.tongdao_id = ''
        this.appendData()
      }).catch(error => {
        this.list2 = []
        this.shuju = []
        this.tongdao_id = ''
        this.appendData()
      })
    },
    handleAvatarSuccess: function () {
      this.getlist()
    },
    getlist () {
      huoqushiboqiwenjian().then((res) => {
        this.list = res.data
      })
    },

    zhuansuqueding: function () {
      this.zhuansulog = false
    },
    zhuansu: function () {
      this.zhuansulog = true
    },
    celiangqueding: function () {
      this.celianglog = false
    },
    celiang: function () {
      this.celianglog = true
    }

  }
}
</script>

<style scoped>
  /deep/ .el-radio__label{ white-space: normal;}
</style>
